<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单管理 - 粮食收购大数据平台</title>
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- Element Plus Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
        }
        .page-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .page-title i {
            color: #4CAF50;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        .stat-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }
        .stat-icon.total { color: #409EFF; }
        .stat-icon.parent { color: #67C23A; }
        .stat-icon.child { color: #E6A23C; }
        .stat-icon.active { color: #F56C6C; }
        .stat-value {
            font-size: 28px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            color: #666;
        }
        .content-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .search-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            align-items: center;
        }
        .search-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .search-item label {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
        }
        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .table-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        .menu-icon {
            margin-right: 8px;
            color: #666;
        }
        .menu-level {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
        }
        .menu-level.level-1 { background-color: #409EFF; }
        .menu-level.level-2 { background-color: #67C23A; }
        .menu-level.level-3 { background-color: #E6A23C; }
        .dialog-form {
            padding: 20px 0;
        }
        .form-section {
            margin-bottom: 20px;
        }
        .form-section-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
            border-left: 3px solid #4CAF50;
            padding-left: 10px;
        }
        .icon-selector {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 10px;
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 10px;
        }
        .icon-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .icon-item:hover {
            border-color: #409EFF;
            background-color: #f0f9ff;
        }
        .icon-item.selected {
            border-color: #409EFF;
            background-color: #409EFF;
            color: white;
        }
        @media (max-width: 768px) {
            .search-bar {
                flex-direction: column;
                align-items: stretch;
            }
            .search-item {
                flex-direction: column;
                align-items: stretch;
            }
            .table-header {
                flex-direction: column;
                gap: 10px;
                align-items: stretch;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="page-container">
            <!-- 页面头部 -->
            <div class="page-header">
                <h1 class="page-title">
                    <i class="fas fa-sitemap"></i>
                    菜单管理
                </h1>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon total">
                        <i class="fas fa-list"></i>
                    </div>
                    <div class="stat-value">{{ totalMenus }}</div>
                    <div class="stat-label">总菜单数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon parent">
                        <i class="fas fa-folder"></i>
                    </div>
                    <div class="stat-value">{{ parentMenus }}</div>
                    <div class="stat-label">父级菜单</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon child">
                        <i class="fas fa-file"></i>
                    </div>
                    <div class="stat-value">{{ childMenus }}</div>
                    <div class="stat-label">子级菜单</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon active">
                        <i class="fas fa-eye"></i>
                    </div>
                    <div class="stat-value">{{ visibleMenus }}</div>
                    <div class="stat-label">显示菜单</div>
                </div>
            </div>

            <!-- 主要内容 -->
            <div class="content-card">
                <!-- 搜索栏 -->
                <div class="search-bar">
                    <div class="search-item">
                        <label>关键词：</label>
                        <el-input
                            v-model="searchForm.keyword"
                            placeholder="请输入菜单名称或路径"
                            style="width: 200px;"
                            clearable>
                        </el-input>
                    </div>
                    <div class="search-item">
                        <label>菜单级别：</label>
                        <el-select v-model="searchForm.level" placeholder="请选择级别" style="width: 120px;" clearable>
                            <el-option label="一级菜单" value="1"></el-option>
                            <el-option label="二级菜单" value="2"></el-option>
                            <el-option label="三级菜单" value="3"></el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <label>显示状态：</label>
                        <el-select v-model="searchForm.visible" placeholder="请选择状态" style="width: 120px;" clearable>
                            <el-option label="显示" value="1"></el-option>
                            <el-option label="隐藏" value="0"></el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" @click="searchMenus">
                        <i class="fas fa-search"></i> 搜索
                    </el-button>
                    <el-button @click="resetSearch">
                        <i class="fas fa-redo"></i> 重置
                    </el-button>
                    <el-button type="success" @click="expandAll">
                        <i class="fas fa-expand-arrows-alt"></i> 展开全部
                    </el-button>
                    <el-button @click="collapseAll">
                        <i class="fas fa-compress-arrows-alt"></i> 收起全部
                    </el-button>
                </div>

                <!-- 表格头部 -->
                <div class="table-header">
                    <div class="table-title">菜单列表</div>
                    <div>
                        <el-button type="primary" @click="showAddDialog">
                            <i class="fas fa-plus"></i> 新增菜单
                        </el-button>
                        <el-button type="success" @click="exportData">
                            <i class="fas fa-download"></i> 导出数据
                        </el-button>
                    </div>
                </div>

                <!-- 数据表格 -->
                <el-table 
                    :data="filteredMenus" 
                    style="width: 100%" 
                    v-loading="loading"
                    row-key="id"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                    :expand-row-keys="expandedKeys"
                    ref="menuTableRef">
                    <el-table-column prop="menu_name" label="菜单名称" min-width="200">
                        <template #default="scope">
                            <i :class="scope.row.icon" class="menu-icon"></i>
                            <span>{{ scope.row.menu_name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="menu_code" label="菜单代码" width="150"></el-table-column>
                    <el-table-column prop="menu_path" label="菜单路径" width="200">
                        <template #default="scope">
                            <el-tag type="info" size="small">{{ scope.row.menu_path || '-' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="菜单级别" width="100">
                        <template #default="scope">
                            <span :class="`menu-level level-${scope.row.level}`">
                                {{ scope.row.level }}级
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sort_order" label="排序" width="80" sortable></el-table-column>
                    <el-table-column prop="is_visible" label="显示状态" width="100">
                        <template #default="scope">
                            <el-tag :type="scope.row.is_visible ? 'success' : 'danger'">
                                {{ scope.row.is_visible ? '显示' : '隐藏' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="component" label="组件路径" width="150">
                        <template #default="scope">
                            <span style="font-size: 12px; color: #666;">{{ scope.row.component || '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="创建时间" width="180" sortable></el-table-column>
                    <el-table-column label="操作" width="250" fixed="right">
                        <template #default="scope">
                            <el-button size="small" @click="viewMenu(scope.row)">
                                <i class="fas fa-eye"></i> 查看
                            </el-button>
                            <el-button size="small" type="primary" @click="editMenu(scope.row)">
                                <i class="fas fa-edit"></i> 编辑
                            </el-button>
                            <el-button size="small" type="success" @click="addSubMenu(scope.row)" v-if="scope.row.level < 3">
                                <i class="fas fa-plus"></i> 添加子菜单
                            </el-button>
                            <el-button size="small" type="danger" @click="deleteMenu(scope.row)" :disabled="scope.row.children && scope.row.children.length > 0">
                                <i class="fas fa-trash"></i> 删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!-- 新增/编辑对话框 -->
        <el-dialog
            :title="dialogTitle"
            v-model="dialogVisible"
            width="600px"
            :before-close="handleClose">
            <div class="dialog-form">
                <el-form :model="menuForm" :rules="rules" ref="menuFormRef" label-width="100px">
                    <div class="form-section">
                        <div class="form-section-title">基本信息</div>
                        <el-form-item label="菜单名称" prop="menu_name">
                            <el-input v-model="menuForm.menu_name" placeholder="请输入菜单名称"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单代码" prop="menu_code">
                            <el-input v-model="menuForm.menu_code" placeholder="请输入菜单代码"></el-input>
                        </el-form-item>
                        <el-form-item label="上级菜单" prop="parent_id">
                            <el-tree-select
                                v-model="menuForm.parent_id"
                                :data="parentMenuOptions"
                                :props="{ value: 'id', label: 'menu_name', children: 'children' }"
                                placeholder="请选择上级菜单"
                                style="width: 100%;"
                                clearable>
                            </el-tree-select>
                        </el-form-item>
                        <el-form-item label="菜单路径" prop="menu_path">
                            <el-input v-model="menuForm.menu_path" placeholder="请输入菜单路径，如：/system/user"></el-input>
                        </el-form-item>
                        <el-form-item label="组件路径" prop="component">
                            <el-input v-model="menuForm.component" placeholder="请输入组件路径，如：system/user/index"></el-input>
                        </el-form-item>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">显示配置</div>
                        <el-form-item label="菜单图标" prop="icon">
                            <el-input v-model="menuForm.icon" placeholder="请选择菜单图标" readonly>
                                <template #append>
                                    <el-button @click="showIconSelector = !showIconSelector">
                                        <i class="fas fa-icons"></i>
                                    </el-button>
                                </template>
                            </el-input>
                            <div v-if="showIconSelector" class="icon-selector" style="margin-top: 10px;">
                                <div 
                                    v-for="icon in iconList" 
                                    :key="icon"
                                    class="icon-item"
                                    :class="{ selected: menuForm.icon === icon }"
                                    @click="selectIcon(icon)">
                                    <i :class="icon"></i>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="排序号" prop="sort_order">
                            <el-input-number v-model="menuForm.sort_order" :min="0" :max="999" style="width: 100%;"></el-input-number>
                        </el-form-item>
                        <el-form-item label="显示状态" prop="is_visible">
                            <el-radio-group v-model="menuForm.is_visible">
                                <el-radio :label="true">显示</el-radio>
                                <el-radio :label="false">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="菜单描述" prop="description">
                            <el-input type="textarea" v-model="menuForm.description" placeholder="请输入菜单描述" :rows="3"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveMenu">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <script>
        const { createApp, ref, computed, onMounted } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;

        createApp({
            setup() {
                // 响应式数据
                const loading = ref(false);
                const dialogVisible = ref(false);
                const isEdit = ref(false);
                const showIconSelector = ref(false);
                const expandedKeys = ref([]);
                
                // 搜索表单
                const searchForm = ref({
                    keyword: '',
                    level: '',
                    visible: ''
                });
                
                // 菜单表单
                const menuForm = ref({
                    id: null,
                    menu_name: '',
                    menu_code: '',
                    parent_id: null,
                    menu_path: '',
                    component: '',
                    icon: '',
                    sort_order: 0,
                    is_visible: true,
                    description: '',
                    level: 1
                });
                
                // 表单验证规则
                const rules = {
                    menu_name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
                    menu_code: [{ required: true, message: '请输入菜单代码', trigger: 'blur' }],
                    sort_order: [{ required: true, message: '请输入排序号', trigger: 'blur' }]
                };
                
                // 图标列表
                const iconList = ref([
                    'fas fa-home', 'fas fa-user', 'fas fa-users', 'fas fa-cog', 'fas fa-chart-bar',
                    'fas fa-table', 'fas fa-file', 'fas fa-folder', 'fas fa-edit', 'fas fa-trash',
                    'fas fa-plus', 'fas fa-minus', 'fas fa-search', 'fas fa-download', 'fas fa-upload',
                    'fas fa-print', 'fas fa-save', 'fas fa-copy', 'fas fa-cut', 'fas fa-paste',
                    'fas fa-undo', 'fas fa-redo', 'fas fa-refresh', 'fas fa-lock', 'fas fa-unlock',
                    'fas fa-eye', 'fas fa-eye-slash', 'fas fa-star', 'fas fa-heart', 'fas fa-flag',
                    'fas fa-bell', 'fas fa-envelope', 'fas fa-phone', 'fas fa-map', 'fas fa-calendar',
                    'fas fa-clock', 'fas fa-camera', 'fas fa-image', 'fas fa-video', 'fas fa-music',
                    'fas fa-shopping-cart', 'fas fa-credit-card', 'fas fa-money-bill', 'fas fa-gift', 'fas fa-tag',
                    'fas fa-bookmark', 'fas fa-thumbs-up', 'fas fa-thumbs-down', 'fas fa-comment', 'fas fa-share'
                ]);
                
                // 模拟菜单数据
                const menuList = ref([
                    {
                        id: 1,
                        menu_name: '系统管理',
                        menu_code: 'system',
                        parent_id: null,
                        menu_path: '/system',
                        component: '',
                        icon: 'fas fa-cog',
                        sort_order: 1,
                        is_visible: true,
                        description: '系统管理模块',
                        level: 1,
                        create_time: '2024-01-15 10:30:00',
                        children: [
                            {
                                id: 2,
                                menu_name: '用户管理',
                                menu_code: 'user',
                                parent_id: 1,
                                menu_path: '/system/user',
                                component: 'system/user/index',
                                icon: 'fas fa-user',
                                sort_order: 1,
                                is_visible: true,
                                description: '管理系统用户账户',
                                level: 2,
                                create_time: '2024-01-15 10:31:00'
                            },
                            {
                                id: 3,
                                menu_name: '角色管理',
                                menu_code: 'role',
                                parent_id: 1,
                                menu_path: '/system/role',
                                component: 'system/role/index',
                                icon: 'fas fa-user-shield',
                                sort_order: 2,
                                is_visible: true,
                                description: '管理用户角色权限',
                                level: 2,
                                create_time: '2024-01-15 10:32:00'
                            },
                            {
                                id: 4,
                                menu_name: '菜单管理',
                                menu_code: 'menu',
                                parent_id: 1,
                                menu_path: '/system/menu',
                                component: 'system/menu/index',
                                icon: 'fas fa-sitemap',
                                sort_order: 3,
                                is_visible: true,
                                description: '管理系统菜单结构',
                                level: 2,
                                create_time: '2024-01-15 10:33:00'
                            }
                        ]
                    },
                    {
                        id: 5,
                        menu_name: '组织管理',
                        menu_code: 'organization',
                        parent_id: null,
                        menu_path: '/organization',
                        component: '',
                        icon: 'fas fa-building',
                        sort_order: 2,
                        is_visible: true,
                        description: '组织架构管理',
                        level: 1,
                        create_time: '2024-01-20 14:20:00',
                        children: [
                            {
                                id: 6,
                                menu_name: '省/兵团管理',
                                menu_code: 'province',
                                parent_id: 5,
                                menu_path: '/organization/province',
                                component: 'organization/province/index',
                                icon: 'fas fa-map',
                                sort_order: 1,
                                is_visible: true,
                                description: '管理省份和兵团信息',
                                level: 2,
                                create_time: '2024-01-20 14:21:00'
                            },
                            {
                                id: 7,
                                menu_name: '市级管理',
                                menu_code: 'city',
                                parent_id: 5,
                                menu_path: '/organization/city',
                                component: 'organization/city/index',
                                icon: 'fas fa-city',
                                sort_order: 2,
                                is_visible: true,
                                description: '管理市级行政区域',
                                level: 2,
                                create_time: '2024-01-20 14:22:00'
                            },
                            {
                                id: 8,
                                menu_name: '区县管理',
                                menu_code: 'district',
                                parent_id: 5,
                                menu_path: '/organization/district',
                                component: 'organization/district/index',
                                icon: 'fas fa-map-marker',
                                sort_order: 3,
                                is_visible: true,
                                description: '管理区县级行政区域',
                                level: 2,
                                create_time: '2024-01-20 14:23:00'
                            },
                            {
                                id: 9,
                                menu_name: '乡镇管理',
                                menu_code: 'town',
                                parent_id: 5,
                                menu_path: '/organization/town',
                                component: 'organization/town/index',
                                icon: 'fas fa-home',
                                sort_order: 4,
                                is_visible: true,
                                description: '管理乡镇级行政区域',
                                level: 2,
                                create_time: '2024-01-20 14:24:00'
                            }
                        ]
                    },
                    {
                        id: 10,
                        menu_name: '业务管理',
                        menu_code: 'business',
                        parent_id: null,
                        menu_path: '/business',
                        component: '',
                        icon: 'fas fa-briefcase',
                        sort_order: 3,
                        is_visible: true,
                        description: '业务数据管理',
                        level: 1,
                        create_time: '2024-02-01 09:15:00',
                        children: [
                            {
                                id: 11,
                                menu_name: '集团管理',
                                menu_code: 'group',
                                parent_id: 10,
                                menu_path: '/business/group',
                                component: 'business/group/index',
                                icon: 'fas fa-industry',
                                sort_order: 1,
                                is_visible: true,
                                description: '管理集团信息',
                                level: 2,
                                create_time: '2024-02-01 09:16:00'
                            },
                            {
                                id: 12,
                                menu_name: '加工厂管理',
                                menu_code: 'factory',
                                parent_id: 10,
                                menu_path: '/business/factory',
                                component: 'business/factory/index',
                                icon: 'fas fa-factory',
                                sort_order: 2,
                                is_visible: true,
                                description: '管理加工厂信息',
                                level: 2,
                                create_time: '2024-02-01 09:17:00'
                            },
                            {
                                id: 13,
                                menu_name: '农户管理',
                                menu_code: 'farmer',
                                parent_id: 10,
                                menu_path: '/business/farmer',
                                component: 'business/farmer/index',
                                icon: 'fas fa-user-friends',
                                sort_order: 3,
                                is_visible: true,
                                description: '管理农户基础信息',
                                level: 2,
                                create_time: '2024-02-01 09:18:00'
                            },
                            {
                                id: 14,
                                menu_name: '地块管理',
                                menu_code: 'field',
                                parent_id: 10,
                                menu_path: '/business/field',
                                component: 'business/field/index',
                                icon: 'fas fa-seedling',
                                sort_order: 4,
                                is_visible: true,
                                description: '管理农田地块信息',
                                level: 2,
                                create_time: '2024-02-01 09:19:00'
                            }
                        ]
                    },
                    {
                        id: 15,
                        menu_name: '数据统计',
                        menu_code: 'statistics',
                        parent_id: null,
                        menu_path: '/statistics',
                        component: '',
                        icon: 'fas fa-chart-bar',
                        sort_order: 4,
                        is_visible: true,
                        description: '数据统计分析',
                        level: 1,
                        create_time: '2024-02-10 16:45:00',
                        children: [
                            {
                                id: 16,
                                menu_name: '收购统计',
                                menu_code: 'purchase',
                                parent_id: 15,
                                menu_path: '/statistics/purchase',
                                component: 'statistics/purchase/index',
                                icon: 'fas fa-shopping-cart',
                                sort_order: 1,
                                is_visible: true,
                                description: '粮食收购数据统计',
                                level: 2,
                                create_time: '2024-02-10 16:46:00'
                            },
                            {
                                id: 17,
                                menu_name: '销售统计',
                                menu_code: 'sales',
                                parent_id: 15,
                                menu_path: '/statistics/sales',
                                component: 'statistics/sales/index',
                                icon: 'fas fa-chart-line',
                                sort_order: 2,
                                is_visible: true,
                                description: '粮食销售数据统计',
                                level: 2,
                                create_time: '2024-02-10 16:47:00'
                            },
                            {
                                id: 18,
                                menu_name: '库存统计',
                                menu_code: 'inventory',
                                parent_id: 15,
                                menu_path: '/statistics/inventory',
                                component: 'statistics/inventory/index',
                                icon: 'fas fa-warehouse',
                                sort_order: 3,
                                is_visible: true,
                                description: '库存数据统计分析',
                                level: 2,
                                create_time: '2024-02-10 16:48:00'
                            }
                        ]
                    }
                ]);
                
                // 计算属性
                const totalMenus = computed(() => {
                    let count = 0;
                    const countMenus = (menus) => {
                        menus.forEach(menu => {
                            count++;
                            if (menu.children) {
                                countMenus(menu.children);
                            }
                        });
                    };
                    countMenus(menuList.value);
                    return count;
                });
                
                const parentMenus = computed(() => {
                    return menuList.value.filter(menu => menu.level === 1).length;
                });
                
                const childMenus = computed(() => {
                    let count = 0;
                    const countChildren = (menus) => {
                        menus.forEach(menu => {
                            if (menu.children) {
                                count += menu.children.length;
                                countChildren(menu.children);
                            }
                        });
                    };
                    countChildren(menuList.value);
                    return count;
                });
                
                const visibleMenus = computed(() => {
                    let count = 0;
                    const countVisible = (menus) => {
                        menus.forEach(menu => {
                            if (menu.is_visible) count++;
                            if (menu.children) {
                                countVisible(menu.children);
                            }
                        });
                    };
                    countVisible(menuList.value);
                    return count;
                });
                
                const dialogTitle = computed(() => isEdit.value ? '编辑菜单' : '新增菜单');
                
                const filteredMenus = computed(() => {
                    // 这里可以添加搜索过滤逻辑
                    return menuList.value;
                });
                
                const parentMenuOptions = computed(() => {
                    // 构建父级菜单选项（排除当前编辑的菜单及其子菜单）
                    const buildOptions = (menus, excludeId = null) => {
                        return menus.filter(menu => menu.id !== excludeId).map(menu => ({
                            id: menu.id,
                            menu_name: menu.menu_name,
                            children: menu.children ? buildOptions(menu.children, excludeId) : []
                        }));
                    };
                    return buildOptions(menuList.value, menuForm.value.id);
                });
                
                // 方法
                const searchMenus = () => {
                    loading.value = true;
                    setTimeout(() => {
                        loading.value = false;
                        ElMessage.success('搜索完成');
                    }, 500);
                };
                
                const resetSearch = () => {
                    searchForm.value = {
                        keyword: '',
                        level: '',
                        visible: ''
                    };
                    ElMessage.info('搜索条件已重置');
                };
                
                const expandAll = () => {
                    const getAllIds = (menus) => {
                        let ids = [];
                        menus.forEach(menu => {
                            ids.push(menu.id);
                            if (menu.children) {
                                ids = ids.concat(getAllIds(menu.children));
                            }
                        });
                        return ids;
                    };
                    expandedKeys.value = getAllIds(menuList.value);
                };
                
                const collapseAll = () => {
                    expandedKeys.value = [];
                };
                
                const showAddDialog = () => {
                    isEdit.value = false;
                    menuForm.value = {
                        id: null,
                        menu_name: '',
                        menu_code: '',
                        parent_id: null,
                        menu_path: '',
                        component: '',
                        icon: '',
                        sort_order: 0,
                        is_visible: true,
                        description: '',
                        level: 1
                    };
                    dialogVisible.value = true;
                };
                
                const addSubMenu = (parentMenu) => {
                    isEdit.value = false;
                    menuForm.value = {
                        id: null,
                        menu_name: '',
                        menu_code: '',
                        parent_id: parentMenu.id,
                        menu_path: '',
                        component: '',
                        icon: '',
                        sort_order: 0,
                        is_visible: true,
                        description: '',
                        level: parentMenu.level + 1
                    };
                    dialogVisible.value = true;
                };
                
                const viewMenu = (menu) => {
                    ElMessage.info(`查看菜单：${menu.menu_name}`);
                };
                
                const editMenu = (menu) => {
                    isEdit.value = true;
                    menuForm.value = { ...menu };
                    dialogVisible.value = true;
                };
                
                const deleteMenu = (menu) => {
                    if (menu.children && menu.children.length > 0) {
                        ElMessage.warning('该菜单下还有子菜单，无法删除');
                        return;
                    }
                    
                    ElMessageBox.confirm(
                        `确定要删除菜单 "${menu.menu_name}" 吗？`,
                        '确认删除',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    ).then(() => {
                        // 这里应该调用删除API
                        ElMessage.success('删除成功');
                    }).catch(() => {
                        ElMessage.info('已取消删除');
                    });
                };
                
                const selectIcon = (icon) => {
                    menuForm.value.icon = icon;
                    showIconSelector.value = false;
                };
                
                const saveMenu = () => {
                    // 这里应该调用保存API
                    if (isEdit.value) {
                        ElMessage.success('菜单更新成功');
                    } else {
                        ElMessage.success('菜单创建成功');
                    }
                    dialogVisible.value = false;
                };
                
                const handleClose = () => {
                    dialogVisible.value = false;
                    showIconSelector.value = false;
                };
                
                const exportData = () => {
                    ElMessage.success('数据导出功能开发中...');
                };
                
                // 生命周期
                onMounted(() => {
                    // 默认展开第一级菜单
                    expandedKeys.value = menuList.value.map(menu => menu.id);
                });
                
                return {
                    loading,
                    dialogVisible,
                    isEdit,
                    showIconSelector,
                    expandedKeys,
                    searchForm,
                    menuForm,
                    rules,
                    iconList,
                    menuList,
                    totalMenus,
                    parentMenus,
                    childMenus,
                    visibleMenus,
                    dialogTitle,
                    filteredMenus,
                    parentMenuOptions,
                    searchMenus,
                    resetSearch,
                    expandAll,
                    collapseAll,
                    showAddDialog,
                    addSubMenu,
                    viewMenu,
                    editMenu,
                    deleteMenu,
                    selectIcon,
                    saveMenu,
                    handleClose,
                    exportData
                };
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>